<script setup>
import { reactive, ref,onBeforeMount, } from 'vue'
import { useRouter } from "vue-router";
import {get_address,pre_order,perProductOrder} from '@/utils/api'
// 

const router = useRouter();

const data=reactive({
   
    adresList:[],
    goodsInfo:null,// 商品列表
    activeAdress:0, //当前选中地址的index
    query:router.currentRoute.value.query, //购物车订单预览商品的id   cart_id
})
const checked1 = ref(true)
onBeforeMount(()=>{
    get_address().then(res=>{
        data.adresList=res.data
        // 代表是购物车订单阅览
        getinfo()
    })
})
const getinfo=()=>{ 
    if(data.query.cart_id){
            pre_order({cart_id:data.query.cart_id,address_id:data.adresList[data.activeAdress].id}).then(res=>{
                if(res.code==200){
                    data.goodsInfo=res.data
                }
            })
        }else{
            perProductOrder({data:JSON.parse(data.query.orderinfo),address_id:data.adresList[data.activeAdress].id}).then(res=>{
                if(res.code==200){
                    data.goodsInfo=res.data
                }
            })
        }
}
const submit=()=>{
    // 购物车去创建订单
    if(data.query.cart_id){
        router.replace({
            path:'/pay',
            query:{
            cart_id:data.query.cart_id,
            anonymous:checked1.value?1:0,
            address_id:data.adresList[data.activeAdress].id,
            type:1,
            totalPrice:data.goodsInfo.total.total_real_price,
            mark:'',
            
            }
        })
    }else{
        // 详情去创建订单
        router.replace({
            path:'/pay',
            query:{
            anonymous:checked1.value?1:0,
            address_id:data.adresList[data.activeAdress].id,
            type:2,
            totalPrice:data.goodsInfo.total.total_real_price,
            mark:'',
            data:data.query.orderinfo
            }
        })
    }
    

}
const addressChange=()=>{
    getinfo()
}
</script>

<template>
    <div class="wrapCenter" v-if="data.goodsInfo">
        <div class="top flex">
            <img src="../../assets/logo.png" style="width: 160px;height: 60px;" alt="">
            <span class="fontS20">确认订单</span>
        </div>
        <div class="title fontS16 flexJBC marB2">
            <span>确认收货地址</span>
            <span class="cur" @click=" router.push({path:'/set',query:{index:2}})">使用新地址</span>
        </div>
        <div class="adress">
            <el-radio-group v-model="data.activeAdress" @change="addressChange">
                <div class="ad_li flexJBC" style="width:1472px" :class="data.activeAdress == index ? 'add_check' : ''"  v-for="(item,index) in data.adresList" :key="item.id">
                    <div  class=" flex fontS18 homeRed" style="width:300px"  :style="{color:data.activeAdress == index? '#DD2131':'#fff'}"> 
                        <img src="../../assets/Image/address_red.png" alt="" v-if="data.activeAdress == index">
                        寄送至 
                    </div>
                    <div class=" fontS20 co3 flex" style="flex:1">
                        <el-radio text-color="#333333" :label="index" size="large" >{{  }}</el-radio> 
                        <div style="flex:1">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.street }}{{ item.detail }} （{{ item.real_name }} 收）{{ item.phone }}</div>
                    </div>
                    <div class=" fontS18 cur" style="width:200px;text-align: right;"
                        :style="{ color: data.activeAdress == index ? '#5C7DCD' : '#fff' }" @click=" router.push({path:'/set',query:{index:2}})">修改本地址</div>
                </div> 
            </el-radio-group>
        </div>
        <div class="title fontS16 flexJBC marB2">
            <span>确认订单信息</span>
        </div>
        <div class="fontS18 co6" style="height:60px;background-color:#F6F7F9;line-height:60px;">
            <span style="margin-left:124px;">商品信息</span>
            <span style="margin-left:480px;">单价</span>
            <span style="margin-left:180px;">数量</span>
            <span style="margin-left:180px;">优惠方式</span>
            <span style="margin-left:180px;">小计</span>
        </div>
        <div class="marB2" v-for="(item,index) in data.goodsInfo.list" :key="index">
            <div style="height:60px;line-height:60px;">
                {{ item.stroe_name }}
                <!-- <span class="co3 fonsS16"><el-checkbox v-model="checked2" label="芒果家鞋屋" size="large" /></span> -->
            </div>
            <div  style="display: flex; height: 190px;border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc;box-sizing: border-box;padding-top: 10px;" v-for="(item1,index1) in item.goods" :key="index1">
                <div class=" fontS16" style="display: flex;line-height: 20px;width:594px">
                    <img :src="item1.image" style="height: 140px;width: 140px;" alt="">
                    <div style="margin-left: 20px;width: 290px;">
                        <p class="marB2 co6">
                            {{ item1.product_name }}
                        </p>

                        <div class="co9" style="margin-bottom: 10px;">
                            <p v-if="item1.suk_name">
                                规格:{{ item1.suk_name }}
                            </p>
                        </div>

                    </div>
                </div>
                <div style="width: 210px; " class="center">
                    <!-- <p class="fontS18 co9" style="text-decoration: line-through;">¥{{ item1.price }}</p> -->
                    <p class="fontS20 co6">¥{{ item1.price }}</p>
                </div>
                <div style="width: 230px;"  class="center">
                    {{ item1.num }} 
                    <!-- <el-input-number v-model="item1.num" :min="1" :max="9999" @change="handleChange" /> -->
                </div>
                <div style="width: 210px;"  class="center">
                    <p class="fontS20 co9">无优惠</p>
                </div>
                <div style="width: 210px;text-align: right;" >
                    <p class="fontS20 homeRed">¥{{ (item1.num*item1.price).toFixed(2) }}</p>
                </div>
            </div>
        </div>
        <div class="fontS16" style="height: 60px;background-color: #EFF3FF;line-height: 60px;">
            <span style="margin-left: 1030px;">运费：</span>
            <span style="margin-left: 10px;">¥{{ data.goodsInfo.total.total_free }}</span>
            <!-- <span style="margin-left: 40px;">（标准配送 DHL 预计8月19日送达）</span> -->

        </div>
        <div class="fontS16"
            style="height: 60px;line-height: 60px;border-bottom: 1px dashed #cccccc;margin-bottom: 40px;">
            <span style="float: right;"><el-checkbox v-model="checked1" label="匿名购买" size="large" class="myRedCheckBox"/></span>
        </div>
        <div class="marB2" style="display: flex;justify-content: flex-end;">
            <div
                style="width: 640px;height: 140px;border: 1px solid #DD2131; padding: 20px 20px 0px 20px;box-sizing: border-box;">
                <p class="fontS16 co3 marB2" style="text-align: right;" > 
                    实付款：
                    <span class="fontS20 homeRed">￥</span>
                    <span class="fontS32 homeRed">{{ data.goodsInfo.total.total_real_price }} </span>
                </p>
                <p style="text-align: right;margin-bottom: 10px;">
                    <span class="co3 fontS16" style="font-weight: bold;" >寄送至：</span>
                    <span class="co6 fontS16">{{ data.adresList[data.activeAdress].province }}{{  data.adresList[data.activeAdress].city }}{{  data.adresList[data.activeAdress].district }}{{  data.adresList[data.activeAdress].street }}{{  data.adresList[data.activeAdress].detail }} </span>
                </p>
                <p style="text-align: right;">
                    <span class="co3 fontS16" style="font-weight: bold;" >收货人：</span>
                    <span class="co6 fontS16">{{  data.adresList[data.activeAdress].real_name }} {{  data.adresList[data.activeAdress].phone }}</span>
                </p>
            </div>
            
        </div>
        <div style="display: flex;justify-content: flex-end;" @click="submit">
                <button class="sontS20" style="border: 0; background-color: #DD2131;color: white; width: 240px; height: 50px;margin-bottom: 100px;">提交订单</button>
        </div>
    </div>
</template>


<style lang="less" scoped>
.title {
    margin-top: 40px;
}

.ad_li {
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing:border-box;
}

.padl {
    padding-left: 410px;
}

.add_check {
    background-color: #FFF4F5;
    border: 1px solid #DD2131;
    box-sizing: border-box;
}
</style>
